<template>
	<view class="wrap">
		<view @tap="setAuto" class="item flex-row">
			<text class="label">自动翻译(收到新消息时)</text>
			<text v-if="autoTranslate" class="iconfont icon-radio-checked"></text>
			<text v-else class="iconfont icon-radio"></text>
		</view>
		<view class="item flex-row">
			<text class="label">当前设置翻译语言</text>
			<view class="label">{{ current }}</view>
		</view>
		<view class="space"></view>
		<scroll-view class="scroll" scroll-y>
			<view @tap="onSelect(item)" v-for="item in langs" :key="item.value" class="item flex-row">
				<text class="label">{{ item.name }}</text>
				<text v-if="lang == item.value" class="iconfont icon-radio-checked"></text>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import XBCIM from 'xbcim'

const langs = ref([])
const lang = ref('')
const autoTranslate = ref(0)
const current = computed(() => {
	return langs.value.find(item=>item.value == lang.value)?.name
})

// 设置自动
function setAuto(){
	autoTranslate.value = 1 - autoTranslate.value
	updateMyProfile()
}

// 选择语言
function onSelect(item){
	lang.value = item.value
	updateMyProfile()
}

// 更新我的资料
function updateMyProfile(){
	XBCIM.updateMyProfile({
		autoTranslate: autoTranslate.value,
		translateTo: lang.value
	}).then(()=>{
		uni.showToast({
			icon: 'none',
			title: '设置成功'
		})
	}).catch(err=>{
		console.log(`修改失败`, err)
		uni.showToast({
			icon: 'none',
			title: '设置失败'
		})
	})
}

// 获取语言列表
async function getList(){
	langs.value = await XBCIM.getLanguageList() || [] as any
}

// 获取用户资料
async function getUserProfile(){
	const { translateTo, autoTranslate: isAutoTranslate } = await XBCIM.getUserProfile()
	lang.value = translateTo || ''
	autoTranslate.value = isAutoTranslate || 0
}

getList()
getUserProfile()
</script>

<style lang="scss" scoped>
.scroll{
	/* #ifdef H5 */
	height: calc(100vh - 220rpx - 44px);
	/* #endif */
	
	/* #ifndef H5 */
	height: calc(100vh - 220rpx);
	/* #endif */
}
.space{
	height: 20rpx;
	background-color: #F5F5F5;
}
.item {
	height: 100rpx;
	padding: 0 30rpx;
	border-bottom: 2rpx solid #f5f5f5;

	.label{
		color: #333;
		font-size: 30rpx;
	}
	
	.iconfont{
		font-size: 40rpx;
		
		&.icon-radio{
			color: #999;
		}
		
		&.icon-radio-checked{
			color: #007aff;
		}
	}
}
</style>